<html>
<head>
<title>CodeBlock Editor</title>
<link rel="stylesheet" href="/themes/admin/css/codemirror.css" />
<style type="text/css">
body{
	font-family:monospace;
	margin:0px;
}

select{
	font-family:monospace;
	border:1px solid #cccccc;
	background-color:#ffffff;
	cursor:pointer;
}

.CodeMirror{
	height:450px;
	width:100%;
}
</style>
</head>
<body onkeyup="updateTextArea()">
	<textarea id='codeeditor'>Your code here</textarea>

	<select id="codeblocklang" onchange="changeCodeLang()">
		<!-- the ones enabled on the frontend -->
		<option>asterisk</option>
		<option>clike</option>
		<option>css</option>
		<option>javascript</option>
		<option>php</option>
		<option>shell</option>
		<option>sql</option>
		<option>xml</option>
		<!-- 
		<option>apl</option>
		<option>asterisk</option>
		<option>clike</option>
		<option>clojure</option>
		<option>cobol</option>
		<option>coffeescript</option>
		<option>commonlisp</option>
		<option>css</option>
		<option>cypher</option>
		<option>d</option>
		<option>diff</option>
		<option>django</option>
		<option>dtd</option>
		<option>dylan</option>
		<option>ecl</option>
		<option>eiffel</option>
		<option>erlang</option>
		<option>fortran</option>
		<option>gas</option>
		<option>gfm</option>
		<option>gherkin</option>
		<option>go</option>
		<option>groovy</option>
		<option>haml</option>
		<option>haskell</option>
		<option>haxe</option>
		<option>htmlembedded</option>
		<option>htmlmixed</option>
		<option>http</option>
		<option>jade</option>
		<option>javascript</option>
		<option>jinja2</option>
		<option>julia</option>
		<option>kotlin</option>
		<option>livescript</option>
		<option>lua</option>
		<option>markdown</option>
		<option>mirc</option>
		<option>mllike</option>
		<option>modelica</option>
		<option>nginx</option>
		<option>ntriples</option>
		<option>octave</option>
		<option>pascal</option>
		<option>pegjs</option>
		<option>perl</option>
		<option selected="selected">php</option>
		<option>pig</option>
		<option>properties</option>
		<option>puppet</option>
		<option>python</option>
		<option>q</option>
		<option>r</option>
		<option>rpm</option>
		<option>rst</option>
		<option>ruby</option>
		<option>rust</option>
		<option>sass</option>
		<option>scheme</option>
		<option>shell</option>
		<option>sieve</option>
		<option>slim</option>
		<option>smalltalk</option>
		<option>smarty</option>
		<option>smartymixed</option>
		<option>solr</option>
		<option>sparql</option>
		<option>sql</option>
		<option>stex</option>
		<option>tcl</option>
		<option>tiddlywiki</option>
		<option>tiki</option>
		<option>toml</option>
		<option>turtle</option>
		<option>vb</option>
		<option>vbscript</option>
		<option>velocity</option>
		<option>verilog</option>
		<option>xml</option>
		<option>xquery</option>
		<option>yaml</option>
		<option>z80</option>
		-->
	</select>

	<script src="/js/codemirror.js"></script>
	<script src="/js/codemirror/apl/apl.js"></script>
	<script src="/js/codemirror/asterisk/asterisk.js"></script>
	<script src="/js/codemirror/clike/clike.js"></script>
	<script src="/js/codemirror/clojure/clojure.js"></script>
	<script src="/js/codemirror/cobol/cobol.js"></script>
	<script src="/js/codemirror/coffeescript/coffeescript.js"></script>
	<script src="/js/codemirror/commonlisp/commonlisp.js"></script>
	<script src="/js/codemirror/css/css.js"></script>
	<script src="/js/codemirror/cypher/cypher.js"></script>
	<script src="/js/codemirror/d/d.js"></script>
	<script src="/js/codemirror/diff/diff.js"></script>
	<script src="/js/codemirror/django/django.js"></script>
	<script src="/js/codemirror/dtd/dtd.js"></script>
	<script src="/js/codemirror/dylan/dylan.js"></script>
	<script src="/js/codemirror/ecl/ecl.js"></script>
	<script src="/js/codemirror/eiffel/eiffel.js"></script>
	<script src="/js/codemirror/erlang/erlang.js"></script>
	<script src="/js/codemirror/fortran/fortran.js"></script>
	<script src="/js/codemirror/gas/gas.js"></script>
	<script src="/js/codemirror/gfm/gfm.js"></script>
	<script src="/js/codemirror/gherkin/gherkin.js"></script>
	<script src="/js/codemirror/go/go.js"></script>
	<script src="/js/codemirror/groovy/groovy.js"></script>
	<script src="/js/codemirror/haml/haml.js"></script>
	<script src="/js/codemirror/haskell/haskell.js"></script>
	<script src="/js/codemirror/haxe/haxe.js"></script>
	<script src="/js/codemirror/htmlembedded/htmlembedded.js"></script>
	<script src="/js/codemirror/htmlmixed/htmlmixed.js"></script>
	<script src="/js/codemirror/http/http.js"></script>
	<script src="/js/codemirror/jade/jade.js"></script>
	<script src="/js/codemirror/javascript/javascript.js"></script>
	<script src="/js/codemirror/jinja2/jinja2.js"></script>
	<script src="/js/codemirror/julia/julia.js"></script>
	<script src="/js/codemirror/kotlin/kotlin.js"></script>
	<script src="/js/codemirror/livescript/livescript.js"></script>
	<script src="/js/codemirror/lua/lua.js"></script>
	<script src="/js/codemirror/markdown/markdown.js"></script>
	<script src="/js/codemirror/mirc/mirc.js"></script>
	<script src="/js/codemirror/mllike/mllike.js"></script>
	<script src="/js/codemirror/modelica/modelica.js"></script>
	<script src="/js/codemirror/nginx/nginx.js"></script>
	<script src="/js/codemirror/ntriples/ntriples.js"></script>
	<script src="/js/codemirror/octave/octave.js"></script>
	<script src="/js/codemirror/pascal/pascal.js"></script>
	<script src="/js/codemirror/pegjs/pegjs.js"></script>
	<script src="/js/codemirror/perl/perl.js"></script>
	<script src="/js/codemirror/php/php.js"></script>
	<script src="/js/codemirror/pig/pig.js"></script>
	<script src="/js/codemirror/properties/properties.js"></script>
	<script src="/js/codemirror/puppet/puppet.js"></script>
	<script src="/js/codemirror/python/python.js"></script>
	<script src="/js/codemirror/q/q.js"></script>
	<script src="/js/codemirror/r/r.js"></script>
	<script src="/js/codemirror/rpm/rpm.js"></script>
	<script src="/js/codemirror/rst/rst.js"></script>
	<script src="/js/codemirror/ruby/ruby.js"></script>
	<script src="/js/codemirror/rust/rust.js"></script>
	<script src="/js/codemirror/sass/sass.js"></script>
	<script src="/js/codemirror/scheme/scheme.js"></script>
	<script src="/js/codemirror/shell/shell.js"></script>
	<script src="/js/codemirror/sieve/sieve.js"></script>
	<script src="/js/codemirror/slim/slim.js"></script>
	<script src="/js/codemirror/smalltalk/smalltalk.js"></script>
	<script src="/js/codemirror/smarty/smarty.js"></script>
	<script src="/js/codemirror/smartymixed/smartymixed.js"></script>
	<script src="/js/codemirror/solr/solr.js"></script>
	<script src="/js/codemirror/sparql/sparql.js"></script>
	<script src="/js/codemirror/sql/sql.js"></script>
	<script src="/js/codemirror/stex/stex.js"></script>
	<script src="/js/codemirror/tcl/tcl.js"></script>
	<script src="/js/codemirror/tiddlywiki/tiddlywiki.js"></script>
	<script src="/js/codemirror/tiki/tiki.js"></script>
	<script src="/js/codemirror/toml/toml.js"></script>
	<script src="/js/codemirror/turtle/turtle.js"></script>
	<script src="/js/codemirror/vb/vb.js"></script>
	<script src="/js/codemirror/vbscript/vbscript.js"></script>
	<script src="/js/codemirror/velocity/velocity.js"></script>
	<script src="/js/codemirror/verilog/verilog.js"></script>
	<script src="/js/codemirror/xml/xml.js"></script>
	<script src="/js/codemirror/xquery/xquery.js"></script>
	<script src="/js/codemirror/yaml/yaml.js"></script>
	<script src="/js/codemirror/z80/z80.js"></script>
	<script type="text/javascript">
		var args = top.tinymce.activeEditor.windowManager.getParams();
		document.getElementById('codeeditor').value = args.existingCodeText;
		var preCodeLang = args.existingCodeLang;
		if(preCodeLang==""){
			/* php as default code */
			preCodeLang = "php";
		}

		document.getElementById('codeblocklang').value = preCodeLang;

		var adminCodeMirror = CodeMirror.fromTextArea(document.getElementById('codeeditor'),{
			lineNumbers: true,
			mode: preCodeLang
		});

		function changeCodeLang(){
			adminCodeMirror.setOption("mode", document.getElementById('codeblocklang').value);
		}

		function updateTextArea(){
			document.getElementById('codeeditor').value = adminCodeMirror.getValue();
		}
	</script>
</body>
</html>